<script setup>
import { getGoodsAPI } from '@/api/detail.js'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import powerSet from '@/utils/power-set.js'
const route = useRoute()
//获取商品信息
const id = route.params.id
const goods = ref()
const pathMap = ref()
const skuId = ref()
const skuObj = ref()
//要穿的参数
const good = defineModel('good')
const getGoods = async () => {
  const res = await getGoodsAPI(id)
  goods.value = res.data.result
  pathMap.value = getPathMap(goods.value)
  initDisabled(goods.value.specs, pathMap.value)
  const arr = getSelectedValues(goods.value.specs)
  console.log(arr)
}
onMounted(() => {
  getGoods()
})
//选中的规格
const selectSku = (item, val) => {
  if (val.disabled) {
    return
  }
  if (val.isselect) {
    val.isselect = false
  } else {
    item.values.forEach((i) => {
      i.isselect = false
    })
    val.isselect = true
  }
  updateDisabled(goods.value.specs, pathMap.value)
  const index = getSelectedValues(goods.value.specs).findIndex(
    (item) => item === undefined
  )
  if (index !== -1) {
    skuId.value = ''
  } else {
    const key = getSelectedValues(goods.value.specs).join('-')
    skuId.value = pathMap.value[key]
    skuObj.value = goods.value.skus.find((item) => item.id === skuId.value[0])
    console.log(skuObj)
  }
  good.value.skuId = skuId.value.toString()
  good.value.skuObj = skuObj.value
}
//规格库存
const getPathMap = (goods) => {
  const pathMap = {}
  //有效sku数组
  const effectiveSkus = goods.skus.filter((sku) => sku.inventory > 0)
  effectiveSkus.forEach((sku) => {
    //获得valueName数组
    const selectedValArr = sku.specs.map((val) => val.valueName)
    const valueArrPowerSet = powerSet(selectedValArr)
    valueArrPowerSet.forEach((arr) => {
      const key = arr.join('-')
      if (pathMap[key]) {
        pathMap[key].push(sku.id)
      } else {
        pathMap[key] = [sku.id]
      }
    })
  })
  return pathMap
}
//初始化禁用状态
const initDisabled = (specs, pathMap) => {
  specs.forEach((spec) => {
    spec.values.forEach((val) => {
      if (pathMap[val.name]) {
        val.disabled = false
      } else {
        val.disabled = true
      }
    })
  })
}
//获取选中项的匹配数组
const getSelectedValues = (specs) => {
  const arr = []
  specs.forEach((spec) => {
    const selectVal = spec.values.find((val) => val.isselect)
    arr.push(selectVal ? selectVal.name : undefined)
  })
  return arr
}
//切换时更新禁用状态
const updateDisabled = (specs, pathMap) => {
  specs.forEach((spec, index) => {
    const selectValues = getSelectedValues(specs)
    spec.values.forEach((val) => {
      selectValues[index] = val.name
      const key = selectValues.filter((value) => value).join('-')
      if (pathMap[key]) {
        val.disabled = false
      } else {
        val.disabled = true
      }
    })
  })
}
</script>
<template>
  <div class="sku">
    <div v-for="item in goods?.specs" :key="item" class="specs">
      <span style="margin-right: 10%">{{ item.name }}</span>
      <a
        href="javascript:;"
        v-for="val in item.values"
        :key="val"
        class="values"
        @click="selectSku(item, val)"
      >
        <div
          class="val"
          :class="[{ active: val.isselect }, { disabled: val.disabled }]"
        >
          <el-image :src="val.picture" v-show="val.picture" class="img" />
          <p>{{ val.name }}</p>
        </div>
      </a>
    </div>
  </div>
</template>
<style scoped lang="scss">
.specs {
  display: flex;
  width: 400px;
  .values {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    text-decoration: none;
    color: black;
  }
  .val {
    margin: 10px;
    text-align: center;
    border: 1px solid #b7a091;
    .img {
      height: 80px;
      width: 100%;
    }
    span {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
    }
    p {
      width: 60px;
    }
  }
  .active {
    border: 2px solid #f27635;
  }

  .disabled {
    pointer-events: none;
    opacity: 0.5; /* 可选：让div看起来不那么活跃 */
  }
}
</style>
